<style lang="less">
@import '../../../styles/common.less';
</style>

<template>
  <Card style="height:800px">
    <Card>
      <header>
        <span>产品:</span>
        <Select v-model="listQueryCondition.productType" placeholder="请选择产品类型" style="width:150px">
          <Option v-for="item in productList" :value="item.productType" :key="item.productType">{{item.productTypeName }}</Option>
        </Select>
        <Button type="primary" @click="listQuery"  style="margin-left: 10px;">查询</Button>
        <Button type="primary" @click="collectionDown"  style="margin-left: 10px;">催收清单下载</Button>
        <Button type="primary" @click="recoveryDown"  style="margin-left: 10px;">回款清单下载</Button>
        <Button type="primary" @click="cancelledDown"  style="margin-left: 10px;">撤案清单下载</Button>
      </header>
    </Card>
    <!-- 催收清单下载Modal-->
    <Modal v-model="collectionModal" title="催收清单下载">
      <Form :model="collectionForm" :label-width="80" id="collectionForm">
        <FormItem label="时间">
          <Row>
            <Col span="11">
            <DatePicker type="date" :options="startTimeOptions" @on-change="startTimeChange" placeholder="请选择" v-model="collectionForm.startDate" name="startDate"></DatePicker>
            </Col>
            <Col span="2" style="text-align: center">至</Col>
            <Col span="11">
            <DatePicker type="date" :options="endTimeOptions" @on-change="endTimeChange" placeholder="请选择" v-model="collectionForm.endDate" name="endDate"></DatePicker>
            </Col>
          </Row>
        </FormItem>
        <FormItem label="催收类型">
          <Select v-model="collectionForm.collectionType" label-in-value>
            <Option v-for="item in collectionTypes" :value="item.value" :key="item.value">{{item.label}}</Option>
          </Select>
        </FormItem>
        <FormItem label="催收公司">
          <Select v-model="collectionForm.companyCode" label-in-value>
            <Option v-for="item in companyList" :value="item.value" :key="item.value">{{item.label}}</Option>
          </Select>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="submit">确认下载</Button>
          <Button style="margin-left: 8px" @click="resetForm">重置</Button>
          <Button style="margin-left: 16px" @click="closeCollectionModal">关闭</Button>
        </FormItem>
        <input type="hidden" name="collectionType" id="collectionType">
        <input type="hidden" name="companyCode" id="companyCode" />
      </Form>
    </Modal>
    <!-- 回款清单下载Modal -->
    <Modal v-model="recoveryModal" title="回款清单下载">
      <Form :model="recoveryForm" :label-width="80" id="recoveryForm">
        <FormItem label="委案时间">
          <Row>
            <Col span="11">
            <DatePicker type="date" placeholder="请选择" :options="startTimeOptions1" @on-change="startTimeChange1" v-model="recoveryForm.startDate" name="startDate"></DatePicker>
            </Col>
            <Col span="2" style="text-align: center">至</Col>
            <Col span="11">
            <DatePicker type="date" placeholder="请选择" :options="endTimeOptions1" @on-change="endTimeChange1" v-model="recoveryForm.endDate" name="endDate"></DatePicker>
            </Col>
          </Row>
        </FormItem>
        <FormItem label="回款时间">
          <Row>
            <Col span="11">
            <DatePicker type="date" placeholder="请选择" :options="startTimeOptions2" @on-change="startTimeChange2" v-model="recoveryForm.receiveStartDate" name="receiveStartDate"></DatePicker>
            </Col>
            <Col span="2" style="text-align: center">至</Col>
            <Col span="11">
            <DatePicker type="date" placeholder="请选择" :options="endTimeOptions2" @on-change="endTimeChange2" v-model="recoveryForm.receiveEndDate" name="receiveEndDate"></DatePicker>
            </Col>
          </Row>
        </FormItem>
        <FormItem label="催收类型">
          <Select v-model="recoveryForm.collectionType">
            <Option v-for="item in collectionTypes" :value="item.value" :key="item.value">{{item.label}}</Option>
          </Select>
        </FormItem>
        <FormItem label="催收公司">
          <Select v-model="recoveryForm.companyCode">
            <Option v-for="item in companyList" :value="item.value" :key="item.value">{{item.label}}</Option>
          </Select>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="submitRecovery">确认下载</Button>
          <Button style="margin-left: 8px" @click="resetRecoveryForm">重置</Button>
          <Button style="margin-left: 16px" @click="closeRecoveryModal">关闭</Button>
        </FormItem>
        <input type="hidden" name="collectionType" id="recoveryCollectionType">
        <input type="hidden" name="companyCode" id="recoveryCompanyCode" />
      </Form>
    </Modal>
    <!-- 撤案清单下载Modal -->
    <Modal v-model="cancelledModal" title="撤案清单下载">
      <Form :model="cancelledForm" :label-width="80" id="cancelledForm">
        <FormItem label="取消时间">
          <Row>
            <Col span="11">
            <DatePicker type="date" placeholder="请选择" :options="startTimeOptions3" @on-change="startTimeChange3" v-model="cancelledForm.startDate" name="startDate"></DatePicker>
            </Col>
            <Col span="2" style="text-align: center">至</Col>
            <Col span="11">
            <DatePicker type="date" placeholder="请选择" :options="endTimeOptions3" @on-change="endTimeChange3" v-model="cancelledForm.endDate" name="endDate"></DatePicker>
            </Col>
          </Row>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="submitcancelled">确认下载</Button>
          <Button style="margin-left: 8px" @click="resetcancelledForm">重置</Button>
          <Button style="margin-left: 16px" @click="closecancelledModal">关闭</Button>
        </FormItem>
      </Form>
    </Modal>
    <Card>
      <Table border :columns="listInfoColumns" :data="listInfoData" style="width: 100%;"></Table>
      <div style="margin-top: 36px;text-align: center;">
        <Page :total="listQueryCondition.total" :current="listQueryCondition.pageNum" :page-size="listQueryCondition.pageSize" size="small" show-elevator show-sizer show-total @on-change="pageChange" @on-page-size-change="sizeChange"></Page>
      </div>
    </Card>
  </Card>
</template>

<script>
export default {
  name: 'mutative-router',
  data () {
    return {
      listQueryCondition: {
        productType: '',
        // channelType:'',
        pageNum: 1,
        pageSize: 10,
        total: 0,
        businessCode: ''
      },
      productList: [],
      fundList: [],
      listInfoData: [],
      collectionModal: false, // 催收清单Modal控制
      recoveryModal: false, // 回款清单Modal控制
      cancelledModal: false, // 撤消委托Modal控制
      endTimeOptions: {},
      startTimeOptions: {},
      endTimeOptions1: {},
      startTimeOptions1: {},
      endTimeOptions2: {},
      startTimeOptions2: {},
      endTimeOptions3: {},
      startTimeOptions3: {},
      collectionForm: {
        startDate: '',
        endDate: '',
        collectionType: '2',
        companyCode: ''
      },
      recoveryForm: {
        startDate: '',
        endDate: '',
        collectionType: '2',
        companyCode: '',
        receiveStartDate: '',
        receiveEndDate: ''
      },
      cancelledForm: {
        startDate: '',
        endDate: ''
      },
      companyList: [],
      collectionTypes: [
        {
          label: '语音催收',
          value: '1'
        },
        {
          label: '人工催收',
          value: '2'
        }
      ],
      listInfoColumns: [
        {
          type: 'index',
          title: '序号',
          width: 60
        },
        {
          title: '产品类型',
          key: 'productTypeName',
          align: 'center'
        },
        {
          title: '渠道',
          key: 'channelName',
          align: 'center'
        },
        {
          title: '语音催收公司',
          key: 'yyCompanyName',
          align: 'center'
        },
        {
          title: '语音催收人数比例',
          key: 'yyScale',
          align: 'center'
        },
        {
          title: '人工催收公司',
          key: 'rgCompanyName',
          align: 'center'
        },
        {
          title: '人工催收人数比例',
          key: 'rgScale',
          align: 'center'
        },
        {
          title: '操作',
          key: 'operation',
          align: 'center',
          render: (h, params) => {
            return h('div', {}, [h('Button', {
              props: {
                type: 'primary',
                size: 'small'
              },
              on: {
                click: () => {
                  var data = { businessCode: params.row.businessCode, isModify: '1' }
                  this.$router.push({ name: 'intelligent-collection-config', params: { data } })
                }
              }
            }, '修改'),
            h('Button', {
              props: {
                type: 'primary',
                size: 'small'
              },
              style: {
                'margin-left': '10px'
              },
              on: {
                click: () => {
                  this.$Modal.confirm({

                    content: '确定删除?',

                    okText: '确定',

                    cancelText: '取消',
                    onOk: () => {
                      var data = { businessCode: params.row.businessCode }
                      this.$ajax.post(this.$appContext.marvels_core_debtor + 'debtor/collection/intelligent/service/deleteCollectionConfig', data).then(re => {
                        var data = re.data
                        var code = data.code
                        var message = data.message
                        if (code === 'success') {
                          this.listQuery()
                        } else {
                          this.$Message.warning(message)
                        }
                      }).catch(er => {

                      })
                    }
                  })
                }
              }
            }, '删除')
            ])
          }
        }
      ]
    }
  },
  computed: {
    avatorImage () {
      return localStorage.avatorImgPath
    }
  },

  created () {
    // 初始化当前页面请求对象实例
    this.$ajax = this.$util.ajax()
    this.conditionInit()
    this.listQuery()
    this.initExcelDownCondtion()
  },

  methods: {
    conditionInit () {
      var vm = this
      this.$ajax.post(this.$appContext.marvels_core_approve + 'approve/loanList/service/baseCondition').then(re => {
        var data = re.data
        var code = data.code
        var message = data.message
        if (code !== 'success') {
          this.$Message.warning(message)
          return
        };
        vm.productList.push({ productType: '', productTypeName: '请选择' })
        for (var i = 0; i < data.data.productList.length; i++) {
          vm.productList.push(data.data.productList[i])
        }
      }).catch(er => {

      })
    },
    listQuery () {
      var vm = this
      this.$ajax.post(this.$appContext.marvels_core_debtor + 'debtor/collection/intelligent/service/collectionConfigList', vm.listQueryCondition).then(re => {
        var data = re.data
        var code = data.code
        if (code === 'success') {
          this.listInfoData = data.data.data
          this.listQueryCondition.total = data.data.total
        };
      }).catch(er => {

      })
    },
    pageChange: function (pageNum) {
      var vm = this
      vm.listQueryCondition.pageNum = pageNum
      vm.listQuery()
    },
    sizeChange: function (pageLength) {
      var vm = this
      vm.listQueryCondition.pageSize = pageLength
      vm.listQuery()
    },
    initExcelDownCondtion: function () {
      var vm = this
      this.$ajax.post(this.$appContext.marvels_core_debtor + 'debtor/collection/intelligent/service/getQueryCondition').then(re => {
        var data = re.data
        var code = data.code
        if (code === 'success') {
          var dataList = data.data.companyList || []
          dataList.forEach(element => {
            vm.companyList.push({
              label: element.companyName,
              value: element.companyCode
            })
          })
        };
      }).catch(er => {

      })
    },
    // 催收清单下载
    collectionDown: function () {
      this.collectionModal = true
    },
    submit: function () {
      if (this.collectionForm.startDate === null || this.collectionForm.endDate === null || this.collectionForm.startDate === '' || this.collectionForm.endDate === '') {
        this.$Message.warning('时间不能为空')
        return
      }
      document.getElementById('collectionForm').action = this.$appContext.marvels_core_debtor + 'debtor/collection/intelligent/service/downloadCollectionExcel'
      document.getElementById('collectionType').value = this.collectionForm.collectionType
      document.getElementById('companyCode').value = this.collectionForm.companyCode
      document.getElementById('collectionForm').submit()
      this.resetForm()
      this.closeCollectionModal()
    },
    resetForm: function () {
      this.collectionForm.startDate = ''
      this.collectionForm.endDate = ''
      this.collectionForm.collectionType = '2'
      this.collectionForm.companyCode = ''
    },
    closeCollectionModal: function () {
      this.collectionModal = false
    },
    // 回款清单下载
    recoveryDown: function () {
      this.recoveryModal = true
    },
    submitRecovery: function () {
      if ((this.recoveryForm.startDate === null || this.recoveryForm.endDate === null || this.recoveryForm.startDate === '' || this.recoveryForm.endDate === '') && (this.recoveryForm.receiveStartDate === null || this.recoveryForm.receiveEndDate === null || this.recoveryForm.receiveStartDate === '' || this.recoveryForm.receiveEndDate === '')) {
        this.$Message.warning('时间不能为空')
        return
      }
      if ((this.recoveryForm.startDate != null && this.recoveryForm.endDate != null && this.recoveryForm.startDate !== '' && this.recoveryForm.endDate !== '') || (this.recoveryForm.receiveStartDate != null || this.recoveryForm.receiveEndDate != null || this.recoveryForm.receiveStartDate !== '' || this.recoveryForm.receiveEndDate !== '')) {
        this.$Message.warning('只能选择一个时间作为查询条件')
        return
      }
      if ((this.recoveryForm.receiveStartDate != null && this.recoveryForm.receiveEndDate != null && this.recoveryForm.receiveStartDate !== '' && this.recoveryForm.receiveEndDate !== '') || (this.recoveryForm.startDate != null || this.recoveryForm.endDate != null || this.recoveryForm.startDate !== '' || this.recoveryForm.endDate !== '')) {
        this.$Message.warning('只能选择一个时间作为查询条件')
        return
      }
      document.getElementById('recoveryForm').action = this.$appContext.marvels_core_debtor + 'debtor/collection/intelligent/service/downloadRecoveryExcel'
      document.getElementById('recoveryCollectionType').value = this.recoveryForm.collectionType
      document.getElementById('recoveryCollectionType').value = this.recoveryForm.companyCode
      document.getElementById('recoveryForm').submit()
      this.resetRecoveryForm()
      this.closeRecoveryModal()
    },
    resetRecoveryForm: function () {
      this.recoveryForm.startDate = ''
      this.recoveryForm.endDate = ''
      this.recoveryForm.collectionType = '2'
      this.recoveryForm.companyCode = ''
      this.recoveryForm.receiveStartDate = ''
      this.recoveryForm.receiveEndDate = ''
    },
    closeRecoveryModal: function () {
      this.recoveryModal = false
    },
    // 撤消委托清单下载
    cancelledDown: function () {
      this.cancelledModal = true
    },
    submitcancelled: function () {
      if (this.cancelledForm.startDate === null || this.cancelledForm.endDate === null || this.cancelledForm.startDate === '' || this.cancelledForm.endDate === '') {
        this.$Message.warning('时间不能为空')
        return
      }
      document.getElementById('cancelledForm').action = this.$appContext.marvels_core_debtor + 'debtor/collection/intelligent/service/downloadCancelledExcel'
      document.getElementById('cancelledForm').submit()
      this.resetcancelledForm()
      this.closecancelledModal()
    },
    resetcancelledForm: function () {
      this.cancelledForm.startDate = ''
      this.cancelledForm.endDate = ''
    },
    closecancelledModal: function () {
      this.cancelledModal = false
    },
    /// //////////////////////////////////////////////////////////////时间校验方法//////////////////////////////////
    startTimeChange: function (e) { // 设置开始时间
      this.collectionForm.startDate = e
      this.endTimeOptions = {
        disabledDate: date => {
          let startTime = this.collectionForm.startDate ? new Date(this.collectionForm.startDate).valueOf() - 1 * 24 * 60 * 60 * 1000 : ''
          return date && (date.valueOf() < startTime)
        }
      }
    },
    endTimeChange: function (e) { // 设置结束时间
      this.collectionForm.endDate = e
      let endTime = this.collectionForm.endDate ? new Date(this.collectionForm.endDate).valueOf() : ''
      this.startTimeOptions = {
        disabledDate (date) {
          return date && date.valueOf() > endTime
        }
      }
    },
    startTimeChange1: function (e) { // 设置开始时间
      this.recoveryForm.startDate = e
      this.endTimeOptions1 = {
        disabledDate: date => {
          let startTime = this.recoveryForm.startDate ? new Date(this.recoveryForm.startDate).valueOf() - 1 * 24 * 60 * 60 * 1000 : ''
          return date && (date.valueOf() < startTime)
        }
      }
    },
    endTimeChange1: function (e) { // 设置结束时间
      this.recoveryForm.endDate = e
      let endTime = this.recoveryForm.endDate ? new Date(this.recoveryForm.endDate).valueOf() : ''
      this.startTimeOptions1 = {
        disabledDate (date) {
          return date && date.valueOf() > endTime
        }
      }
    },
    startTimeChange2: function (e) { // 设置开始时间
      this.recoveryForm.receiveStartDate = e
      this.endTimeOptions2 = {
        disabledDate: date => {
          let startTime = this.recoveryForm.receiveStartDate ? new Date(this.recoveryForm.receiveStartDate).valueOf() - 1 * 24 * 60 * 60 * 1000 : ''
          return date && (date.valueOf() < startTime)
        }
      }
    },
    endTimeChange2: function (e) { // 设置结束时间
      this.recoveryForm.receiveEndDate = e
      let endTime = this.recoveryForm.receiveEndDate ? new Date(this.recoveryForm.receiveEndDate).valueOf() : ''
      this.startTimeOptions2 = {
        disabledDate (date) {
          return date && date.valueOf() > endTime
        }
      }
    },
    startTimeChange3: function (e) { // 设置开始时间
      this.cancelledForm.startDate = e
      this.endTimeOptions3 = {
        disabledDate: date => {
          let startTime = this.cancelledForm.startDate ? new Date(this.cancelledForm.startDate).valueOf() - 1 * 24 * 60 * 60 * 1000 : ''
          return date && (date.valueOf() < startTime)
        }
      }
    },
    endTimeChange3: function (e) { // 设置结束时间
      this.cancelledForm.endDate = e
      let endTime = this.cancelledForm.endDate ? new Date(this.cancelledForm.endDate).valueOf() : ''
      this.startTimeOptions3 = {
        disabledDate (date) {
          return date && date.valueOf() > endTime
        }
      }
    }

  }

}
</script>
<style>
.ivu-modal-footer {
  display: none;
}
</style>
